import React,{PureComponent} from 'react'
import {View,Image,StyleSheet,TouchableOpacity,Text,Dimensions,Button,Platform} from 'react-native'

const {width} = Dimensions.get('window')

type Props = {
    info:Object,
    index:number,
    // onPress:Function,
}

export default class DetailLessonCell extends PureComponent<Props>{

    render(){
        const {index} = this.props
        const {info} = this.props

        let year = info.start_at
        let years = year.split(' ')
        let year_ = years[0]
        let months = year_.split('-')
        let times = months[1] + '月' + months[2] + '日'

        let start = year.split(' ')
        let end = info.end_at.split(' ')
        let dates = start[1].substr(0,5) + '到' + end[1].substr(0,5)

        return (
                <View style={styles.container}>
                    <Text style={styles.text_}>{(index + 1)}</Text>
                    <Text style={[styles.text_,{marginLeft:5, maxWidth:(width - 170)}]}>{info.title}</Text>
                    <View style={{flex:1}}/>
                    <Text style={[styles.text_,{marginLeft:18, marginRight:12}]}>{ times + dates}</Text>
                </View>
        )
    }
    renderBtn(){

        const {info} = this.props


        let zhibo_time = new Date(info.start_at.replace(/-/g,"/")).getTime()
        let end_time = new Date(info.end_at.replace(/-/g,"/")).getTime()

        let current_time = new Date().getTime()
        var show_btn = ''
        if ((zhibo_time - current_time) > 30 * 60) {
            show_btn = '未开始'
        } else if ((zhibo_time - current_time) < 30 * 60 && (zhibo_time - current_time) > 0) {
            show_btn = '即将开始'
        } else if (current_time > zhibo_time && current_time < end_time) {
            show_btn = '直播中'
        } else if (current_time > end_time) {
            show_btn = '回放'
        }
        if ((zhibo_time - current_time) > 30 * 60) {
            return <TouchableOpacity style={styles.un_bg_btn} onPress={()=>{this.props.onPress()}}>
                <Text style={styles.un_title_bn}>{show_btn}</Text>
            </TouchableOpacity>
        }else {
            return <TouchableOpacity style={styles.bg_btn} onPress={()=>{this.props.onPress()}}>
                <Text style={styles.title_bn}>{show_btn}</Text>
            </TouchableOpacity>
        }

    }

}
const styles =StyleSheet.create({
    container:{
        flexDirection:'row',
        paddingLeft:12,
        paddingBottom:10,
        backgroundColor:'white',
        alignItems:'center',
        flex:1,
    },
    text_:{
        color:'#555555',
        fontSize:12,
    },
    bg_btn:{
        backgroundColor:"#DB3843",
        width:60,
        height:17,
        borderRadius:8,
        justifyContent:'center',
        alignItems:'center',
        marginLeft:10,
        marginRight:12,
    },
    title_bn:{
        color:'#FFFFFF',
        fontSize:11,
    },
    un_bg_btn:{
        backgroundColor:"#EEEEEE",
        width:60,
        height:17,
        borderRadius:8,
        justifyContent:'center',
        alignItems:'center',
        marginLeft:10,
        marginRight:12,
    },
    un_title_bn:{
        color:'#333333',
        fontSize:11,
    }


})